<template>
  <div class="show-mark">
     <div v-for="(item, index) in annotate" :key="index">
      <div class="new-rect">
        <h3 class="rect-left">{{ item[index]?.title }}</h3>
      </div>
      <div v-for="(citem, jx) in item" :key="jx" class="annotate-pos">
        <!-- <el-input :ref="`RefInput_index${index}_jx${jx}`" v-model="citem.titleDesc" clearable type="textarea"
          placeholder="请输入..." autosize :disabled="limits === true" 
         /> -->
         <p v-html="citem.titleDesc"></p>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { reactive, ref, onBeforeMount, onMounted } from 'vue'
const title = ref()
const props = defineProps({
  annotate: {
    type: Array as any,
    default: () => []
  },
  limits: {
    type: Boolean,
    default: false
  },
  DocumentData: {
    type: Object,
    default: () => { }
  }
})
</script>
<style scoped lang='scss'>
.show-mark{
  margin: 0 10px;
  color: #fff;
  .annotate-pos{
    margin-bottom: 10px;
 
  }
}
</style>